<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档的加载</title>
    <script type="text/javascript">
        window.onload = function () {
            var btn = document.getElementById("btn");
            btn.onclick = function () {
                alert("我真的是一个按钮啊");
            }
        };
    </script>
</head>
<body>
    <!--
        浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行，如果script标签写到页面上面，在代码执行时，页面还没有加载。

        将Js代码写到页面底部就是为了可以在页面加载完毕以后在执行Js代码

        但是我就是想把Js代码写在head标签中，这时可以使用：onload事件

        onload事件会在整个页面加载完成之后才会触发，为window绑定一个onload事件即可

        这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
    -->
<button id="btn">我是一个按钮啊</button>
</body>
</html>